<template>
  <div class="hello">
    <h1>Vue初体验</h1>
    
    <!-- 输入框 -->
    <input 
      v-model="inputText"
      placeholder="请输入内容"
      class="input-box"
      :style="{ color: inputTextColor }"
    >
    
    <!-- 条件显示的展示框 -->
    <div 
      v-if="inputText"
      class="display-box"
      :style="{ fontSize: '32px' }"
    >
      {{ inputText }}
    </div>
    
    <!-- 清空按钮 -->
    <button 
      v-if="inputText"
      @click="clearText"
      class="clear-btn"
    >
      清空
    </button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputText: '',
      inputTextColor: 'red',
      isCleared: false
    }
  },
  methods: {
    clearText() {
      this.inputText = '';
      this.isCleared = true;
    }
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
  margin-top: 60px;
}
h1 {
  color: #42b983;
  font-size: 2.5em;
}
.placeholder-box {
  height: 20px;
  margin: 20px 0;
}
.input-box {
  padding: 8px;
  margin: 20px 0;
  width: 300px;
  font-size: 16px;
  color: red;
}
.display-box {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px auto;
  width: 300px;
  min-height: 50px;
  text-align: left;
}
.clear-btn {
  padding: 8px 20px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
.clear-btn:hover {
  background-color: #3aa876;
}
.child-component {
  margin-top: 20px;
  padding: 10px;
  border: 1px dashed #ddd;
  display: inline-block;
}
</style>

